/* eslint-disable prettier/prettier */
import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, Alert, TouchableOpacity, ImageBackground } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import Cell from '../../components/Cell/index';

const Stack = createStackNavigator();

function MyInfo() {
  const [userInfo, setUserInfo] = useState(null);
  const [status, setStatus] = useState(true);
  const getUserInfo = async () => {
    try {
      const response = await fetch('http://www.mock.chmc.xyz/mock/5f4365a5d75100193824a9fd/example/userinfo');
      const { data } = await response.json();
      setUserInfo(data.userinfo);
    } catch (error) {
      Alert.alert(
        '请求错误',
        error,
      );
    }
  };
  useEffect(() => {
    if (status) {
      getUserInfo();
      setStatus(false);
    }
  }, [status, userInfo]);

  return (
    <View style={styles.content}>
      <View style={styles.navCard}>
        <ImageBackground style={styles.image} source={require('../../assets/my_bg.png')}>
          <Image style={styles.avatar} source={{
            uri: userInfo?.avatar,
          }} />
          <Text style={styles.nickname}>{userInfo?.nickname}</Text>
          <Text style={styles.phone}>{userInfo?.phone}</Text>
        </ImageBackground>
      </View>
      <View style={styles.bodyCard}>
        <ScrollView>
          <TouchableOpacity
            onPress={() => Alert.alert(
              '提示',
              '待开发中',
            )}>
            <Cell title="历史记录" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => Alert.alert(
              '提示',
              '待开发中',
            )}>
            <Cell title="设置" />
          </TouchableOpacity>
        </ScrollView>
      </View>
    </View>
  );
}

export default function My() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="MyInfo" component={MyInfo} options={{
        title: '我的',
      }} />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F6F7F9',
  },
  navCard: {
    width: '100%',
    height: 220,
    backgroundColor: '#ffffff',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: '100%',
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
    alignItems: 'center',
  },
  bodyCard: {
    width: '100%',
    height: 240,
    marginTop: 10,
    backgroundColor: '#ffffff',
  },
  avatar: {
    borderWidth: 1,
    width: 80,
    height: 80,
    borderRadius: 50,
    borderColor: '#ccc',
  },
  nickname: {
    backgroundColor: '#ffffff',
    fontSize: 16,
    paddingLeft: 12,
    paddingRight: 12,
    borderRadius: 10,
  },
  phone: {
    fontSize: 14,
    color: '#ffffff',
    paddingTop: 6,
  },
});
